page-layout2-editcomponent {
    .scroll-content {
        background-color: #F5F5F5 !important;
    }
    .setting-content {
        height: 95%;
    }
    .scrollHeight {
        height: 20vh;
        position: relative;
        z-index: 0;
    }
    .setting-title {
        color: #595959;
        margin: 15px;
        font-size: 14px;
        font-weight: 600;
    }
    .setting-box {
        position: absolute;
        width: calc(100% - 30px);
        background-color: #FFF;
        margin: 0 15px;
        padding: 0 15px;
        border-radius: 5px;
        height: 55vh;
        .tabs {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            padding-top: 15px;
            font-size: 17px;
            color: #959595;
            .tab {
                text-align: center;
                width: 49%;
            }
            .selected {
                color: #595959;
            }
        }
        .notabs {
            justify-content: flex-start;
        }
        .h-line {
            margin: 15px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            height: 2px;
            width: 100%;
            background-color: #ECECEC;
            .active {
                height: 2px;
                background-color: #389BEE;
                width: 49%;
            }
        }
    }
    .showkeyboard {
        top: 0;
    }
    .devicebox {
        position: absolute;
        display: flex;
        flex-flow: row; // margin-bottom: 160px;
        .selected {
            opacity: 1;
            box-shadow: 0 0 5px 3px rgba(60, 150, 255, 0.8) !important;
        }
        .unselected {
            opacity: 0.6;
        }
        .actionblock {
            display: flex;
            align-items: center;
            justify-content: center; // position: relative;
            width: 23vw;
            height: 23vw;
            margin: 3px 0 0 3px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }
    }
    [demo-box] {
        height: 100%;
        position: absolute;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 10px 0 15px;
        [demo-item] {
            margin-right: 2vw;
            box-shadow: 0 0 10px #0000001f;
            border-radius: 5px;
            background-color: #FFF;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            layout2text {
                height: 100%;
                width: 100%;
                transform: scale(0.95, 0.95);
            }
            layout2button {
                height: 100%;
                width: 100%;
                transform: scale(0.95, 0.95);
            }
            layout2range {
                height: 100%;
                width: 100%;
                transform: scale(0.95, 0.95);
            }
            layout2color {
                height: 100%;
                width: 100%;
                transform: scale(0.95, 0.95);
            }
            layout2number {
                height: 100%;
                width: 100%;
                transform: scale(0.95, 0.95);
            }
            layout2debug {
                height: 100%;
                width: 100%; // transform: scale(0.95, 0.95);
            }
            layout2joystick {
                height: 100%;
                width: 100%;
                transform: scale(0.95, 0.95);
            }
            layout2timer {
                height: 100%;
                width: 100%;
                transform: scale(0.95, 0.95);
            }
        }
        .selected {
            opacity: 1;
            box-shadow: 0 0 5px 3px rgba(60, 150, 255, 0.8) !important;
        }
    }
    .range-box {
        position: relative;
        .range {
            transform: scale(0.5, 0.5);
        }
        .range1 {
            transform-origin: 15vw;
        }
        .range2 {
            transform-origin: -15vw;
        }
    }
    .color-box {
        position: absolute;
        .color {
            transform: scale(0.6, 0.6);
            transform-origin: left;
        }
    }
    .joystick-box {
        position: relative;
        justify-content: center;
        .joystick {
            transform: scale(0.6, 0.6);
        }
    }
    .debug-box {
        position: absolute;
        width: 100%;
        .debug {
            transform: scale(0.45, 0.45);
        }
        .debug1 {
            position: absolute;
            transform-origin: left;
        }
        .debug2 {
            position: absolute;
            right: 15px;
            transform-origin: right;
        }
    }
    .bc {
        width: 10vw;
    }
    [setting-item] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        width: 100%;
        height: 35px;
        margin-bottom: 5px;
        [item-name] {
            width: 25%;
            font-size: 14px;
        }
        [input-box] {
            position: static;
            width: 70%;
            // margin-right: 1px;
            padding: 5px 10px;
            border-radius: 3px;
            border: 1px solid #B5B5B5;
            input {
                font-size: 14px;
                border: 0;
                width: 100%;
            }
        }
        [item-item] {
            width: 70%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            color: #959595;
            i {
                margin-right: 1px;
            }
            .selected {
                color: #389BEE;
            }
        }
        .btnmode {
            font-size: 13px;
        }
        .icon-box {
            display: flex;
            align-items: center;
            width: 70%;
            .btn {
                border-radius: 3px;
                border: 1px solid #B5B5B5;
                color: #5a5a5a;
                background-color: rgb(248, 248, 248);
                padding: 3px 5px;
            }
        }
        .color-btn-box {
            display: flex;
            width: 70%;
            align-items: center;
            justify-content: space-around;
            [color-btn] {
                margin-right: 15px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
            }
            .selected {
                border-radius: 50%;
                border: 1px solid #B5B5B5;
                width: 30px;
                height: 30px;
                margin: -5px;
            }
        }
    }
    .speech-table {
        display: flex;
        flex-direction: column;
        .col1 {
            width: 70%;
        }
        .col2 {
            // position: absolute;
            // right: 70px;
        }
        .col3 {
            // position: absolute;
            // right: 0;
        }
    }
    .speech-title {
        color: #595959;
    }
    .speech-del-button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 25px;
        height: 25px;
        font-size: 30px;
    }
    .speech-add-button {
        width: 100%;
        margin-top: 20px;
        background-color: #389BEE;
    }
}